
<template>
  <div class="box">
    <el-card
      style="background-color: #fff;width: 600px;padding: 10px 50px;
    margin: auto;  position: absolute;top: 0; left: 0; bottom: 0; right: 0;height: 350px"
    >
      <el-form>
        <el-form-item>
          <p style="font-size:38px">欢迎回来</p>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginform.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginform.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login" type="primary" style="width: 100%;">登录</el-button>
          <p>
            <span>忘记密码？</span>
            <router-link style="color: #409EFF;text-decoration:none" to="/login">前往重置</router-link>
          </p>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 引入 jwt_decode 库

import { jwtDecode } from "jwt-decode";

export default {
  data() {
    return {
      loginform: {
        account: "",
        password: ""
      },
      disableLoginButton: false
    };
  },
  methods: {
    login() {
      this.disableLoginButton = true;
      //发送登录请求
      //1:请求必须是post请求
      //2:账号key默认是username 密码是password
      //3:后端获取请求的数据是从URL后面拿的
      //4:登录的接口地址默认是/login, 也可以指定
      let param = new URLSearchParams();
      param.append("username", this.loginform.account);
      param.append("password", this.loginform.password);
      this.$axios.post("api/login", param).then(res => {
        // 启用登录按钮
        this.disableLoginButton = false;
        if (res.data.code == 200) {
          //把jwt保存起来
          localStorage.setItem("authToken", res.data.data);
          // 解析 JWT 并提取 userId
          const jwtToken = res.data.data;
          const decodedToken = jwtDecode(jwtToken);
          const userId = decodedToken.userId;
          // 将 userId 也保存到 localStorage
          localStorage.setItem("userId", userId);
          //路由到首页
          // 检查是否已经在/home页面，避免重复导航
          if (this.$route.path !== "/homeIndex") {
            //路由到首页
            this.$router.push("/homeIndex");
          }
        }
        if (res.data.code == 2000) {
          this.$message.error("账号或密码错误");
        }
      });
    }
  }
};
</script>

<style scoped>
.el-col {
  background: white;
  padding: 15% 20px;
  border-radius: 2px; /*加圆角 */
}
.el-input {
  margin: 8px 1px;
}
.box {
  position: relative;
  width: 100%;
  height: 900px;
  background: url("../assets/index/12.jpeg") center/100% 100% no-repeat;
  animation: carousel 15s infinite;
}
@keyframes carousel {
  0%,
  20% {
    background: url("../assets/index/04.jpeg") center / 100% 100% no-repeat;
  }
  30%,
  50% {
    background: url("../assets/index/02.jpg") center / 100% 100% no-repeat;
  }
  60%,
  80% {
    background: url("../assets/index/07.jpeg") center / 100% 100% no-repeat;
  }
  90%,
  100% {
    background: url("../assets/index/08.jpeg") center / 100% 100% no-repeat;
  }
}
</style>
